<template>
    <div class="view-item-modal-wrapper">
        <el-dialog :model-value="props.value" :title="dialog.title" :width="dialog.width" destroy-on-close>
            <el-form ref="ruleFormRef" :model="formData" label-width="110px" :disabled="true">
                <el-form-item label="消息类型">
                    <el-input v-model="formData.typeName" />
                </el-form-item>
                <el-form-item label="标识符">
                    <el-input v-model="formData.typeNo" />
                </el-form-item>
                <el-form-item label="消息性质" style="margin-left: 0; width: 100%">
                    <el-radio-group v-model="formData.messageMethod">
                        <el-radio v-for="(value, key) in MessageMethod" :value="key" :key="key">{{ value }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="Topic生成规则" style="margin-left: 0; width: 100%">
                    <el-input v-model="formData.topicRule" />
                </el-form-item>
                <el-form-item label="描述" style="margin-left: 0; width: 100%">
                    <el-input v-model="formData.description" type="textarea" maxlength="200" show-word-limit />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="props.close">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { PopupBoxProps } from '@great/utils';

enum MessageMethod {
    SUBSCRIBE = '消费',
    PUBLISH = '生产'
}

interface IProps extends PopupBoxProps {
    row?: Record<string, any>;
    callBack?: () => Promise<void>;
}
const props = defineProps<IProps>();

interface Dialog {
    title: string;
    width: number;
    detail?: Record<string, any>;
}
const dialog = reactive<Dialog>({
    title: '查看消息类型',
    width: 900,
    detail: undefined
});

const formData = reactive<any>({
    typeName: '',
    typeNo: '',
    messageMethod: '',
    topicRule: '',
    description: ''
});
//关闭弹框
const closeDialog = () => {
    props.close();
    props.callBack?.();
};

// 打开弹框
const openDialog = () => {
    if (props.row) {
        dialog.detail = JSON.parse(JSON.stringify(props.row));
        Object.keys(formData).forEach(key => {
            formData[key] = props.row?.[key];
        });
    } else {
        delete formData.id;
    }
};

const init = () => {
    openDialog();
};
init();
</script>
<style scoped lang="scss">
.view-item-modal-wrapper {
    .el-form {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
            width: calc((100% - 10px) / 2);
        }
        .el-form-item:nth-child(even) {
            margin-left: 10px;
        }
        :deep(.protocol-box) {
            .el-form-item__content {
                display: flex;
                .el-select {
                    flex: 1;
                }
                .el-select + .el-select {
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>
